// pages/cart/component/cart.js
import { ComponentWithStore } from 'mobx-miniprogram-bindings'

import { userStore } from '@/store/userstore'

import {
  reqCartList,
  reqUpdateCart,
  reqCheckAllStatus,
  reqAddCart,
  reqDelCArtGoods
} from '@/api/cart'

//导入防抖函数
import { debounce } from 'miniprogram-licia'

//滑块弹回
import { swipercellbehavior } from '@/behaviors/swiperCell'

//导入miniprogram-computed
// component.js
const computedBehavior = require('miniprogram-computed').behavior

ComponentWithStore({
  //注册behaviors
  behaviors: [computedBehavior, swipercellbehavior],

  // 让页面和store对象建立关联
  storeBindings: {
    store: userStore,
    fields: ['token']
  },

  //用来定义计算属性
  computed: {
    //判断是否全选,控制全选按钮效果
    //计算属性会被挂载到data对象中
    selecrAllStatus(data) {
      // 不能访问通过this访问data数据
      //想访问data 需使用新参
      return (
        data.cartList.length !== 0 && data.cartList.every((item) => item.isChecked === 1)
      )
    },

    //计算全部金额
    totalPrice(data) {
      //用来对订单总金额进行累加
      let totalPrice = 0

      data.cartList.forEach((item) => {
        //需要判断商品是否选中状态,ischecked 是否等于1
        if (item.isChecked) {
          totalPrice += item.price * item.count
        }
      })
      return totalPrice
    }
  },

  // 组件的初始数据
  data: {
    cartList: [],
    emptyDes: '还没有添加商品，快去添加吧～'
  },

  // 组件的方法列表
  methods: {
    //跳转index tarbar
    goToIndex() {
      wx.switchTab({
        url: '/pages/index/index'
      })
    },
    //展示文案信息获取购物车列表数据
    async showTipGetList() {
      if (!this.data.token) {
        this.setData({
          emptyDes: '您尚未登陆 点击登录获取更多权益',
          cartList: []
        })
        return
      }
      //获取购物车数据
      const { data: cartList, code } = await reqCartList()
      if (code === 200) {
        this.setData({
          cartList,
          emptyDes: cartList.length === 0 && '还没有添加商品 快去添加商品'
        })
      }
    },

    //更新购物车商品状态
    updateChecked(event) {
      // console.log(event)
      //获取最新购买状态
      const { detail } = event

      //获取传递商品ID以及index
      const { id, index } = event.currentTarget.dataset
      //将最新购买状态转换后端 0 和 1
      const isChecked = detail ? 1 : 0

      reqUpdateCart(id, isChecked).then((res) => {
        if (res.code === 200) {
          //第一种更新方法
          // this.showTipGetList()

          //第二种更新方法  更好不用重新发送请求
          this.setData({
            [`cartList[${index}].isChecked`]: isChecked
          })
        }
      })
    },

    //实现购物车全选和全不选效果
    selectAllStastus(event) {
      //获取全选按钮选中状态
      const { detail } = event
      const isChecked = detail ? 1 : 0
      reqCheckAllStatus(isChecked).then((res) => {
        // this.showTipGetList()

        //对购物车列表数组深拷贝
        const newList = JSON.parse(JSON.stringify(this.data.cartList))
        newList.forEach((item) => {
          item.isChecked = isChecked
        })
        //频繁调用this.setData影响性能
        this.setData({
          cartList: newList
        })
      })
    },

    //更新购买的数量
    changeBuyNum: debounce(function (event) {
      // console.log(event)
      //获取最新购买数量
      //如果购买数量大于200 如果大于200则为200
      //最大是200 ,目前是1 假设用户超过200(300)  则差值 300-1=299  服务器299+1=300
      const newbuynum = event.detail > 200 ? 200 : event.detail
      //获取商品id 索引 以及之前购买数量
      const { id, index, oldbuynum } = event.target.dataset
      // console.log({ id, index, oldbuynum })
      // 验证购买数量的正则 是否1到200之间正整数
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      //对用户的值进行验证  true则验证成功
      const regRes = reg.test(newbuynum)

      //如果验证失败 说明输入不对 ,则还原为之前的值
      if (!regRes) {
        this.setData({
          [`carList${index}.count`]: oldbuynum
        })
      }
      //如果验证通过则需要验证插值发送服务器请求更新
      const disCount = newbuynum - oldbuynum
      console.log(disCount)
      //判断购买数量是否发生改变不发生请求
      if (disCount === 0) return

      //如果购买数量发生变化 则发送请求
      reqAddCart({ goodsId: id, count: disCount }).then((res) => {
        if (res.code === 200) {
          this.setData({
            [`cartList[${index}].count`]: newbuynum,
            [`cartList[${index}].isChecked`]: 1
          })
        }
      })
    }, 500),

    //删除购物车商品
    delCartGoods(event) {
      const { id } = event.currentTarget.dataset
      //询问是否删除该商品
      wx.Model({
        content: '是否删除该商品?'
      }).then((res) => {
        if (!res) return
        reqDelCArtGoods(id).then((res) => {
          if (res.code == 200) {
            this.showTipGetList()
            wx.toast({
              title: '删除成功'
            })
          }
        })
      })
    },

    //如果使用Component方法来构建页面 生命周期要写到mehtods
    onShow() {
      // console.log(this.data.token)
      //第一种更新购买状态方式
      this.showTipGetList()
    },

    //跳转订单结算
    toOrder() {
      //判断订单是否勾选商品
      if (this.data.totalPrice === 0) {
        wx.toast({
          title: '请选择需要购买的商品'
        })
        return
      } else {
        wx.navigateTo({
          url: '/modules/orderPayModules/pages/order/detail/detail'
        })
      }
    },
    onHide() {
      this.onSwiperCommonClick()
    }
  }
})
